<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>码咯</title>
    <script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app" @click="closeUserInfo">
        <header>
            <div class="container">
                <div class="u_logo">
                    <img src="../img/logo.png" alt="">
                </div>
                <ul class="u_nav">
                    <li>
                        <a class="active" title="首页" href="/">首页</a>
                    </li>
                    <li>
                        <a title="上传" href="/upload">上传</a>
                    </li>
                </ul>
                <div class="u_serach">
                    <input type="text" placeholder="搜索" @keyup.enter="searchAr" v-model="keyword">
                    <i class="iconfont" @click.stop="searchAr">&#xe619;</i>
                </div>
                <div class="u_write">
                    <a href="#"  class="u_wr_c"><i class="iconfont">&#xe60e;</i>写文章1</a>
                </div>
                <a href="javascript:;" class="u_head" @click.stop="switchUserInfo">
                    <img src="../img/head.png" alt="">
                    <img src="../img/head_de.png" alt="">
                </a>
                <div class="u_use_ctr" v-show="isShowUserInfo">
                    <ul>
                        <li>
                            <a href="/post">写文章</a>
                        </li>
                        <li>
                            <a href="javascript:;">我的主页</a>
                        </li>
                        <li>
                            <a href="javascript:;">登出</a>
                        </li>
                    </ul>
                </div>
            </div>
        </header>